<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <el-table :data="volunList" style="width: 100%">
          <el-table-column prop="v_name" label="姓名"/>
          <el-table-column prop="v_sex" label="性别"/>
          <el-table-column prop="v_birthday" label="出生日期">
            <template #default="scope">
              {{ utils.ymd(scope.row.v_birthday) }}
            </template>
          </el-table-column>
          <el-table-column prop="v_phone" label="手机号" />
          <el-table-column prop="v_addr" label="居住地" />
          <el-table-column prop="v_politic" label="政治面貌" />
          <el-table-column prop="v_works" label="职业" />
          <el-table-column prop="v_line" label="在线时长/h"/>
          <el-table-column prop="v_serve" label="服务时长/h"/>
          <el-table-column label="操作">
            <template #default="scope">
              <div class="operate">
                <span @click="pass(scope.row.id)">审核通过</span>
                <span @click="cancle(scope.row.id)">不通过</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { getAllVoluns } from "@/server/volunteer";
import utils from "@/utils/utils";
import { ElMessage, ElMessageBox } from "element-plus";

const { proxy }: any = getCurrentInstance();
const volunList = ref<any>([]);

onMounted(async () => {
  await getVolun();
});
function getVolun() {
  getAllVoluns().then((res: any) => {
    volunList.value = res.data.filter((item: any) => item.state == 0);
  });
}

const pass = (id: number) => {
  ElMessageBox.confirm("确认你的操作", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      proxy.$http.post("volunteer/update/" + id, { state: 1 }).then(async () => {
        await getVolun();
      });
    })
    .catch(() => {
      ElMessage.info("操作取消");
    });
};

const cancle = (id: number) => {
  ElMessageBox.confirm("确认你的操作", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      proxy.$http.post("volunteer/update/" + id, { state: 2 }).then(async () => {
        await getVolun();
      });
    })
    .catch(() => {
      ElMessage.info("操作取消");
    });
};
</script>

<style lang="less" scoped>
.common-layout {
  background-color: pink;
  height: 100%;
  .el-container {
    height: 100%;
    .el-main {
      padding: 0;
      .operate {
        font-size: 12px;
        color: #60a5fa;
        display: flex;
        justify-content: space-between;
      }
      .operate:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
